<template>
  <div class='container'>
    <el-row>
      <el-col :span='24'>
        <el-card>
          <div class="search">
            <el-row>
              <el-form class="form" label-width="100px" :model="orderParams">
                <el-col :span="12">
                  <el-form-item label="代理商名称">
                    <el-input v-model="orderParams.name" size="mini" placeholder="请输入代理商名称"></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="联系电话">
                    <el-input v-model="orderParams.mobile" size="mini" placeholder="请输入联系电话"></el-input>
                  </el-form-item>
                </el-col>

                <el-col :span="12">
                  <el-form-item label="日期">
                    <div class="block">
                      <el-date-picker
                        v-model="value1"
                        type="daterange"
                        value-format="yyyy-MM-dd"
                        format="yyyy-MM-dd"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        @change="chooseTimeRange">
                      </el-date-picker>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="所属区域">
                    <el-cascader
                      ref="searchAddress"
                      size="large"
                      :options="optionProps"
                      v-model="selectedOptions"
                      @change="handleChange2">
                    </el-cascader>
                  </el-form-item>
                </el-col>

                <el-col :span="8" :offset="8">
                  <el-form-item></el-form-item>
                  <el-form-item>
                    <el-button @click="submitSearch()">搜索</el-button>
                    <el-button @click="clearListSearch">重置</el-button>
                  </el-form-item>
                </el-col>
              </el-form>
            </el-row>
          </div>
          <div slot="header">
            <bread></bread>
          </div>

          <div class="business-table">
            <div class="table-wrapper">
              <el-table
                :data="userList"
                style="width: 100%"
                align='center'
                :header-cell-style="{background:'#eef1f6'}"
              >

                <el-table-column
                  label="代理级别"
                  align='center'
                >
                  <template slot-scope="scope">
                    <span v-if="scope.row.agentType == 1">省级代理</span>
                    <span v-if="scope.row.agentType == 2">市级代理</span>
                    <span v-if="scope.row.agentType == 3">县级代理</span>
                  </template>
                </el-table-column>
                <el-table-column
                  label="代理区域"
                  align='center'
                >
                  <template slot-scope="scope">
                    <span>{{scope.row.province}} {{scope.row.city}}</span>
                  </template>
                </el-table-column>

                <el-table-column
                  prop="person"
                  label="营业执照"
                  align='center'>

                  <template slot-scope="scope">
                    <img :src="scope.row.agentImg" min-width="70" height="70"/>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="联系人"
                  align='center'>
                </el-table-column>
                <el-table-column
                  prop="mobile"
                  label="联系电话"
                  align='center'>
                </el-table-column>
                <el-table-column
                  prop="createTime"
                  :formatter="formatDate"
                  label="签约时间"
                  align='center'>
                </el-table-column>
              </el-table>
            </div>
            <div class="table-footer">
              <el-row>
                <el-col>
                  <el-button @click="showDialog(0)" size="small">
                    添加
                  </el-button>
                </el-col>
              </el-row>
            </div>
          </div>


          <div class="pagination">
            <pagination :pageTotal="pageTotal" @handleCurrentChange="handleCurrentChange"
                        @handleSizeChange="handleSizeChange"></pagination>
          </div>

          <!-- 编辑提示框 -->
          <el-dialog :visible.sync="dialogFormVisible" width="500px" center :modal-append-to-body="false">
            <div class="el-dialog-div">

              <el-row>
                <el-form class="form" label-width="100px" :model="userParams">
                  <el-col>
                    <el-form-item label="用户名">
                      <el-input v-model="userParams.account" size="mini" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名">
                      <el-input v-model="userParams.name" size="mini" placeholder="请输入姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="密码">
                      <el-input v-model="userParams.password" size="mini" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item label="电话">
                      <el-input v-model="userParams.mobile" size="mini" placeholder="请输入电话"></el-input>
                    </el-form-item>


                    <el-form-item label="代理商等级">
                      <el-select v-model="value" placeholder="请选择" style="width:100%">
                        <el-option
                          v-for="item in levelList"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                          <span style="float: left">{{ item.label }}</span>
                        </el-option>
                      </el-select>
                    </el-form-item>

                    <el-form-item label="图片上传">
                      <el-upload
                        class="avatar-uploader"
                        action="http://www.ccppvip.com:8081/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess">
                        <img v-if="userParams.agentImg" :src="userParams.agentImg" class="avatar" width="50%">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                      </el-upload>
                    </el-form-item>

                    <el-form-item label="监管地区">
                      <el-cascader
                        size="large"
                        ref="address"
                        :options="optionProps"
                        v-model="selectedOptions"
                        @change="handleChange1">
                      </el-cascader>
                    </el-form-item>

                    <div>
                      <el-form-item label="运营地区" v-for="(item,index) in doAddress" :key="index">
                        <el-cascader
                          size="large"
                          ref="cascaderAddr"
                          :options="optionProps"
                          v-model="doAddress[index]"
                          @change="handleChange">
                        </el-cascader>
                        <el-col class="btns">
                          <el-button size="small" type="primary" @click="add">添加</el-button>
                          <el-button size="small" type="danger" @click="del(index)">删除</el-button>
                        </el-col>
                      </el-form-item>
                    </div>


                  </el-col>
                  <el-col :span="18" :offset="4">
                    <el-form-item>
                      <el-button v-if="num==0" @click="addAgent()">添加</el-button>
                      <el-button v-if="num==1" @click="changeRole()">修改</el-button>
                      <el-button @click="clearListSearch">重置</el-button>
                    </el-form-item>
                  </el-col>
                </el-form>
              </el-row>
            </div>
          </el-dialog>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import pagination from '../../common/pagination'
import bread from '../../common/bread'
import { addUser, agentPlatList, queryAddress, roleList } from '../../api/api'
import { formatDate } from 'src/utils/utils'

export default {

  data () {
    return {
      optionProps: [],
      stateList: [{
        value: 1,
        label: '处理中'
      }, {
        value: 2,
        label: '已通过'
      }, {
        value: 3,
        label: '未通过'
      }],
      dialogFormVisible: false,
      num: '',
      userList: [],
      userParams: {
        userId: sessionStorage.getItem('userId'),
        id: '',
        account: '',
        name: '',
        agentImg: '',
        type: 2,
        password: '',
        mobile: '',
        doAddress: [], // 运营地区
        agentType: '',
        province: '',
        city: '',
        county: ''
      },


      orderParams: {
        pageNum: 1,
        pageSize: 10,
        userId: sessionStorage.getItem('userId'),
        name: '',
        mobile: '',
        startTime: '',
        endTime: '',
        province: '',
        city: '',
        county: ''
      },
      levelList: [{
        value: '1',
        label: '省级代理'
      }, {
        value: '2',
        label: '市级代理'
      }, {
        value: '3',
        label: '区级代理'
      }],
      pageTotal: 0,
      value1: '',
      value: '',
      selectedOptions: [],
      doAddress: [[]] // 这个里面是多维数组    默认有一个空数组
    }
  },
  mounted () {
    this.getGoodsList()
    this.queryAddress()
  },
  methods: {
    handleAvatarSuccess (res, file) {
      this.userParams.agentImg = URL.createObjectURL(file.raw)
      this.userParams.agentImg = JSON.parse(res.slice(5)).data.split('?')[0]
      console.log(this.userParams.agentImg)
    },
    chooseTimeRange (value) {
      for (var x in value) {
        this.orderParams.startTime = value[0]
        this.orderParams.endTime = value[1]
      }
    },
    formatDate (row, column) {
      let date = row[column.property]
      date = new Date(date)
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    },
    // 格式化表单数据
    clearForm () {
      this.orderParams = {
        pageNum: 1,
        pageSize: 10,
        userId: sessionStorage.getItem('userId'),
        name: '',
        mobile: '',
        startTime: '',
        endTime: '',
        province: '',
        city: '',
        county: ''
      }
    },
    showDialog (num, row) {
      this.num = num
      if (row) {
        this.userParams.ID = row.id
        this.userParams.mobile = row.mobile
        this.userParams.account = row.account
        this.userParams.name = row.name
        this.userParams.password = row.password
      }
      this.dialogFormVisible = true
      const para = Object.assign({})
      roleList(para).then(res => {
        console.log(res)
        this.roleIdList = res.data
      })
    },
    // 清除列表的搜索表单
    clearListSearch () {
      this.clearForm()
      this.value1 = ''
      this.selectedOptions = []
      this.getGoodsList()
    },
    show (scope) {
      console.log(scope)
    },
    // 添加
    add () {
      this.doAddress.push([])
    },
    // 删除
    del (index) {
      let list = this.userParams.doAddress
      if (list.length === 1) {
        this.doAddress = [[]]
      } else {
        this.doAddress.splice(index, 1)
      }
    },
    // 表格数据
    getGoodsList (type) {
      this.userList = []
      const para = Object.assign({}, this.orderParams)
      agentPlatList(para).then(res => {
        console.log(res)
        this.userList = res.data.list
        this.pageTotal = res.data.total
      })
    },
    // 上下分页
    handleCurrentChange (val) {
      this.orderParams.pageNum = val
      this.getGoodsList()
    },
    // 每页显示多少条
    handleSizeChange (val) {
      this.orderParams.pageSize = val
      this.getGoodsList()
    },
    submitSearch () {
      this.getGoodsList()
    },

    queryAddress () {
      queryAddress().then(res => {
        console.log(res)
        this.optionProps = res.data
        console.log(this.optionProps)
      })
    },


    getDate (date) {
      console.log(date)
    },
    addAgent () {
      const para = Object.assign({}, this.userParams, {
        agentType: this.value,
        doAddress: JSON.stringify(this.userParams.doAddress)
      })
      addUser(para).then(res => {
        if (res.code === 0) {
          this.dialogFormVisible = false
          // this.userParams.clear()
          this.getGoodsList()
          this.$toast('添加成功')
        } else {
          this.$toast(res.msg)
        }
      })
    },
    handleChange (value) {
      let doAddress = []
      this.$refs['cascaderAddr'].forEach(function(value, index, self) {
        let labels = value.getCheckedNodes()[0].pathLabels
        console.log(labels)
        doAddress[index] = {
          province: labels[0],
          city: labels[1],
          county: labels[2]
        }
      })
      this.userParams.doAddress = doAddress
      console.log(this.userParams.doAddress)
    },

    handleChange1 (value) {
      let labels = this.$refs['address'].getCheckedNodes()[0].pathLabels
      this.userParams.province = labels[0]
      this.userParams.city = labels[1] === '全部' ? '' : labels[1]
      this.userParams.county = labels[2] === '全部' ? '' : labels[2]
    },
    handleChange2 (value) {
      let labels = this.$refs['searchAddress'].getCheckedNodes()[0].pathLabels
      this.orderParams.province = labels[0]
      this.orderParams.city = labels[1] === '全部' ? '' : labels[1]
      this.orderParams.county = labels[2] === '全部' ? '' : labels[2]
    }
  },
  components: {
    pagination,
    bread
  }
}
</script>
<style lang='scss'>
  .business-tabs {
    margin: 0 0 10px 0;
  }

  .el-dialog--small {
    width: 600px !important;
  }

  .container {
    .search {
      margin: 0 0 20px 0;
    }

    .el-table {
      .warning-row {
        background-color: oldlace;
      }
    }

    .recommend-tag {
      display: inline-block;
      margin: 4px 0;
      margin-right: 4px;

      &:last-child {
        margin-right: 0;
      }
    }

    .table-footer {
      padding: 10px;
      background: #eef1f6;
    }

    .el-dialog-div {
      max-height: 400px;
      overflow-y: scroll;

      .btns {
        margin: 10px 0 0 0;
      }
    }
  }
</style>


